<template>
    <div class="add">
        <head-top></head-top>
        <!-- 习题题目 -->
        <div class="edit_container3">
            <!-- :options="editorOption":配置项  ref="myQuillEditor"：ref标识    @ready="onEditorReady($event)：-->
            <quill-editor v-model="content" ref="myQuillEditor" id="editer2" :options="editorOption"
                @ready="onEditorReady($event)">
            </quill-editor>
        </div>
        <!-- 中间的添加条件 -->
        <el-input type="textarea" :rows="2" placeholder="请输入习题答案" v-model="textarea" class="textarea1">
        </el-input>
        <div class="cond">
            <el-form :inline="true" :model="courseType" class="demo-form-inline">
                <span class="demonstration1">请选择添加条件</span>
                <el-cascader  :options="courseType.options" :props="{ checkStrictly: true }" clearable></el-cascader>
                <el-form-item label="题型" class="tixing1">
                    <el-select v-model="courseType.text" placeholder="请选择对应的题型" onchange="getpage()">
                        <el-option label="选择题" value="xuanze"></el-option>
                        <el-option label="填空题" value="tiankong"></el-option>
                        <el-option label="判断题" value="pandaun"></el-option>
                        <el-option label="简答题" value="jianda"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="submit_btn1">
            <el-button type="primary" @click="submit" class="submit1">提交</el-button>
        </div>
    </div>
</template>
    
<script>
import headTop from '../../components/headTop.vue'
import { quillEditor } from 'vue-quill-editor'
export default {
    data() {
        return {
            content: '<h3>文本编辑</h3>',
            editorOption: {
            },
            kind: '',
            textarea: '',
            courseType: {
                value: [],
                options: [{
                    value: 'qiandaun',
                    label: '前端',
                    children: [{
                        value: 'html',
                        label: 'html',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'css',
                        label: 'css',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'js',
                        label: 'js',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }]
                }, {
                    value: 'houdaun',
                    label: '后端',
                    children: [{
                        value: 'html',
                        label: 'html',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'css',
                        label: 'css',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'js',
                        label: 'js',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }]
                }, {
                    value: 'dashuju',
                    label: '大数据',
                    children: [{
                        value: 'java',
                        label: 'Java简介',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'shuzu',
                        label: '数组',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'duixaing',
                        label: '面向对象',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }]
                }],
                checkStrictly:false,
            },
        }
    },
    components: {
        headTop,
        quillEditor,
    },
    methods: {
        onEditorReady(editor) {
            console.log('editor ready!', editor)
        },
        submit() {
            this.$message.success('提交成功！');
        }
    }
}
</script>
<style lang="less">
// @import '../style/mixin';

.edit_container3 {
    padding: 40px;
    margin-bottom: 20px;
}

.editer {
    height: auto;
}

.submit_btn {
    text-align: center;
}

#editer2{
    width: 1150px;
    margin: 0 auto;
}

.ql-toolbar {
    width: 1150px;
}

.ql-container {
    width: 1150px;
}

//答案文本框
.textarea1 {
    width: 1150px;
    display: block;
    margin: 0 auto;
}

.cond {
    width: 1150px;
    display: block;
    margin: 40px auto;
}

.el-input {
    width: 200px;
}

.demonstration1 {
    margin-right: 15px;
    margin-left: 130px;
}

.tixing1 {
    float: right;
    padding-right: 200px;
}

.tixing1 .el-form-item__label {
    margin-right: 10px;
    font-size: 16px;
    color: #000;
}

.submit_btn1 {
    width: 60px;
    height: 40px;
    margin: 200px auto 0;
}
.edit_container3{
    padding: 40px;
    width: 1200px;
}
</style>